<template>
  <Card
    class="events-card"
    ref="eventsCard"
    :eventDetailList="eventDetailList"
    style="height:800px;width:100%;min-height:660px;background:#01237C;">
      <p slot="title" style="padding-left:30px;">
      <!-- <Icon type="ios-film-outline"></Icon> -->
      事件详情
      </p>
      <ul style="text-align:left; padding:10px 0px; list-style:none;">
        <li v-for="item in eventDetailList" :key="item.index">
          <!-- <p
            style="line-height:16px;font-size:16px;color:#fff;padding:10px 10px;"
          >
            事件站点：{{ item.station }}
          </p> -->
          <p
            style="line-height:16px;font-size:16px;color:#fff;padding:10px 10px;"
          >
            事件区域：{{ item.category }}
          </p>
          <p
            style="line-height:16px;font-size:16px;color:#fff;padding:10px 10px;"
          >
            事件名称：{{ item.event_name }}
          </p>
          <p
            style="line-height:16px;font-size:16px;color:#fff;padding:10px 10px;"
          >
            事件原因：{{ item.cause }}
          </p>
          <p
            style="line-height:16px;font-size:16px;color:#fff;padding:10px 10px;"
          >
            事件等级：{{ item.level }}
          </p>
          <p
            style="line-height:16px;font-size:16px;color:#fff;padding:10px 10px;"
          >
            发生时间：{{ item.datetime }}
          </p>
          <p
            style="line-height:16px;font-size:16px;color:#fff;padding:10px 10px;"
          >
            事件照片：
            <img
              :src="item.http_url_image"
              style="width:100%;padding:10px 10px;"
            />
          </p>
          <p
            style="line-height:16px;font-size:16px;color:#fff;padding:10px 10px;"
          >
            事件视频：
            <Button
              v-if="item.http_url_video !== '' && !item.http_url_video.endsWith('null')"
              @click="clickDetailEventVideo()"
              size="small"
              type="warning"
            >
              查看视频
            </Button>
            <span v-else>无视频</span>
            <Modal
              v-model="item.videoModal"
              :title="
                item.category +
                  ' - ' +
                  item.event_name +
                  ' - ' +
                  item.level +
                  ' - ' +
                  item.datetime
              "
              width="1080"
              class-name="vertical-center-modal"
              footer-hide
              @on-cancel="cancelModal(item.index)"
            >
              <div style="height: 100%;padding: 10px 10px;">
                <MyVideoMp4 
                :ref="'VideoMp4'+item.index"
                :src="item.http_url_video" ></MyVideoMp4>
              </div>
            </Modal>
          </p>
        </li>
      </ul>
  </Card>
</template>

<script>
// 视频
import MyVideoMp4 from "@/components/myvideo/MyVideoMp4";

export default {
  name: "myDetail",
  components: {
    MyVideoMp4
  },
  props: {
    eventDetailList: {
      type: Array
    },
    cardHeight:{
      type:String,
      default:"300"
    }
  },
  computed: {
    item: function() {
      return this.eventDetailList[0];
    },
  },
  watch:{
    cardHeight:function(newvalue){
      // console.log(this.$refs.eventsCard.$el.style.height)
      this.$refs.eventsCard.$el.style.height=newvalue+"px"
    }
  },
  methods: {
    clickDetailEventVideo: function() {
      this.$emit("handleDetailEventVideo", this.item);
    },
    cancelModal(index){
      // 关闭model暂停视频
      // console.log(index)
      // console.log(this.$refs["VideoMp4"+index][0].$refs.videoPlayer.player)
      this.$refs["VideoMp4"+index][0].$refs.videoPlayer.player.pause()
      // this.$refs.videoPlayer.player.pause()
    }
  }
};
</script>

<style lang="less">
.ivu-card-bordered {
  border: 1px solid #0a4271 !important;
  border-color: #0a4271 !important;
}
.events-card .ivu-card-head {
  padding: 4px 15px !important;
  border-bottom: 1px solid #0b0f34 !important;
  /* background-color: #13a4c2 !important; */
  background-color: #0b0f34 !important;
  background-image: url("../../assets/title-bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 50px;
}
.events-card .ivu-card-head p {
  font-size: 2rem !important;
  height: 50px !important;
  line-height: 50px !important;
  // margin-top: 4px;
  color: #fff !important;
  text-align: left;
}
.events-card .ivu-card-body {
  padding: 0px !important;
}
</style>
